<template>
  <div class="app-container">
    <!-- 查询 -->
    <el-row>
      <el-col class="mb-2">
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button title="重置" @click="refresh()">重置
          <!-- <svg-icon icon-class="refresh" /> -->
        </el-button>
        <el-button type="primary" @click="visible = true">添加</el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="data"
      :height="height"
      stripe
      highlight-current-row
    >
      <el-table-column prop="idkey" label="ID" width="80" sortable="custom" />
      <el-table-column prop="unique" label="公众号名称" show-overflow-tooltip />
      <el-table-column prop="unique" label="微信号" show-overflow-tooltip />
      <el-table-column prop="name" label="appId" show-overflow-tooltip />
      <el-table-column prop="unique" label="服务器地址(URL)" show-overflow-tooltip />
      <el-table-column prop="unique" label="二维码" show-overflow-tooltip />
      <el-table-column prop="tag_names" label="备注" show-overflow-tooltip />
      <el-table-column label="操作" width="95" fixed="right">
        <template #default="scope">
          <el-link type="primary" class="mr-1" :underline="false" @click="edit(scope.row)">
            修改
          </el-link>
          <el-link type="primary" :underline="false"> 删除 </el-link>
          <el-link type="primary" :underline="false"> 清空 API 配额 </el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="count > 0"
      v-model:total="count"
      v-model:page="query.page"
      v-model:limit="query.limit"
      @pagination="list"
    />

    <el-dialog
      v-model="visible"
      title="Tips"
      width="30%"
      :before-close="
        (done) => {
          ElMessageBox.confirm('是否关闭?')
            .then(() => {
              done()
            })
            .catch(() => {
              // catch error
            })
        }
      "
    >
      <el-form
        label-width="120px"
        :rules="{
          test1: [{ required: true, message: '请输入公众号名称', trigger: 'blur' }],
          test2: [{ required: true, message: '请输入微信号', trigger: 'blur' }],
          test3: [{ required: true, message: '请输入公众号 appId', trigger: 'blur' }],
          test4: [{ required: true, message: '请输入公众号 appSecret', trigger: 'blur' }],
          test5: [{ required: true, message: '请输入公众号 token', trigger: 'blur' }]
        }"
      >
        <el-form-item label="公众号名称" prop="test1">
          <el-input v-model="model.test" placeholder="请输入公众号名称" clearable />
        </el-form-item>
        <el-form-item label="微信号" prop="test2">
          <el-input v-model="model.test" placeholder="请输入微信号" clearable />
        </el-form-item>
        <el-form-item label="appId" prop="test3">
          <el-input v-model="model.test" placeholder="请输入公众号 appId" clearable />
        </el-form-item>
        <el-form-item label="appSecret" prop="test4">
          <el-input v-model="model.test" placeholder="请输入公众号 appSecret" clearable />
        </el-form-item>
        <el-form-item label="token" prop="test5">
          <el-input v-model="model.test" placeholder="请输入公众号 token" clearable />
        </el-form-item>
        <el-form-item label="消息加密密钥" prop="test6">
          <el-input v-model="model.test" placeholder="请输入消息加密密钥" clearable />
        </el-form-item>
        <el-form-item label="备注" prop="test7">
          <el-input type="textarea" v-model="model.test" placeholder="请输入备注" clearable />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="visible = false">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import { getPageLimit } from '@/utils/settings'
import { list } from '@/api/content/content'

export default {
  name: 'ConfigWxIndex',
  components: {},

  data() {
    return {
      data: [],
      loading: false,
      height: 680,
      count: 0,
      query: {
        page: 1,
        limit: getPageLimit()
      },
      visible: false,
      model: {}
    }
  },
  created() {
    this.height = screenHeight()
  },
  methods: {
    // 列表
    list() {
      this.loading = true
      list(this.query)
        .then((res) => {
          this.data = res.data.list
          this.count = res.data.count
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
